<template>
	<view class="container">
		
		<view class="chat-body">
	        <block v-for="(chat, index) in chatMsgList" :key="index">
				<!-- 时间显示 -->
	            <view class="chat-time" v-if="chat.dateTime">{{chat.dateTime}}</view>
				
	            <view v-if="!!chat.sender" class="chat-one">
	                <image class="chat-face" :src="chat.face" />
	                <view class="chat-box">
	                    <view class="chat-sender" v-if="!!chat.sender">{{chat.sender}}</view>
	                    <view class="chat-content" v-if="chat.msgType == 'text'">{{chat.msgInfo}}</view>
	                    <image class="chat-img" v-if="chat.msgType == 'img'" :src="chat.msgInfo" mode='widthFix' />
	                </view>
	            </view>
				
	            <view v-else class="chat-one chat-one-mine" >
	                <view class="chat-box">
	                    <view class="chat-content" v-if="chat.msgType == 'text'">{{chat.msgInfo}}</view>
	                    <image class="chat-img" v-if="chat.msgType == 'img'" :src="chat.msgInfo" mode='widthFix'></image>
						<view class="chat-content" v-if="chat.msgType == 'voice'" @tap="playVoice(chat.vsrc)">
							<u-icon class="micon" name="volume" color="#666" size="32" />
							<text>点击播放</text>
						</view>
	                </view>
	                <image class="chat-face" :src="avatarUrl" />
	            </view>
				
	        </block>
	    </view>
		
		<view class="chat-footer">
	        <u-icon v-if="voiceInputTag" name="volume-up-fill" color="#666" size="52" @tap="changeInputType"/>
	        <u-icon v-else name="mic" color="#666" size="52" @tap="changeInputType"/>
			
	        <view v-if="voiceInputTag" class="voice-input" @touchstart="startMic" @touchend="stopMic">按住 说话</view>
	        <input v-else class="msg-input" type="text" cursor-spacing="16" :value="msgInput" @input="getMsgValue"/>
			
	        <u-icon name="camera" color="#666" size="52" @tap="sendImgMsg"/>
			
			<view class="send-btn" v-if="msgInput.length > 0" @tap="sendMsg">发送</view>
	    </view>
		
		
		
		
	</view>
</template>

<script>
	import chatMsgList from '@/common/chatMsgList.js'
	export default {
		data(){
			return {
				chatMsgList,
				avatarUrl:'/static/faces/6-thump.jpg',
				voiceInputTag: true,
				msgInput:''
			}
		},
		onLoad(option){
			console.log(option.name)
			uni.setNavigationBarTitle({
			    title: option.name
			});
		},
		onShow(){
			if(!!uni.getStorageSync("chatMsgList")){
				this.chatMsgList = JSON.parse(uni.getStorageSync("chatMsgList"))
				this.$nextTick(()=>{
					this.scrollToBottom()
				})
			}
		},
		methods:{
			scrollToBottom(){
				uni.pageScrollTo({
					scrollTop: 9999999,
					duration: 0
				})
			},
			KKw(msg){
				return wx.serviceMarket.invokeService({
				  service: 'wxcae50ba710ca29d3', // 'wx_mp_appid',
				  api: 'thumbupbot',
				  data: {
				    "q": msg, // 需要夸的内容  
				  },
				})
			},
			changeInputType(){
				this.voiceInputTag = !this.voiceInputTag
			},
			getMsgValue(event){
				this.msgInput = event.detail.value
			},
			async sendMsg(){
				let senderMsg = {
					dataTime: new Date(),
					msgType: 'text',
					msgInfo: this.msgInput
				}
				this.chatMsgList.push(senderMsg)
				
				let res = await this.KKw(this.msgInput)
				console.log(res.data.data_list["0"].result)
				
				let resMsg = {
					sender: '前端课堂',
					face: '/static/faces/3-thump.jpg',
					msgType: 'text',
					msgInfo: res.data.data_list["0"].result
				}
				
				this.chatMsgList.push(resMsg)
				uni.setStorageSync('chatMsgList', JSON.stringify(this.chatMsgList))
				
				this.msgInput = ''
				
				this.$nextTick(()=>{
					this.scrollToBottom()
				})
				
			},
			sendImgMsg(){
				wx.chooseImage({
				  count: 1,
				  sizeType: ['original', 'compressed'],
				  sourceType: ['album', 'camera'],
				  success: res=> {
				    // tempFilePath可以作为img标签的src属性显示图片
				    const tempFilePaths = res.tempFilePaths
					console.log(tempFilePaths[0])
					
					let senderMsg = {
						dataTime: new Date(),
						msgType: 'img',
						msgInfo: tempFilePaths[0]
					}
					this.chatMsgList.push(senderMsg)
					
					let resMsg = {
						sender: '前端课堂',
						face: '/static/faces/3-thump.jpg',
						msgType: 'text',
						msgInfo: '客户发布了一张图片'
					}
					
					this.chatMsgList.push(resMsg)
					uni.setStorageSync('chatMsgList', JSON.stringify(this.chatMsgList))
					
					this.$nextTick(()=>{
						this.scrollToBottom()
					})
					
					
				  }
				})
			},
			startMic(){
				wx.startRecord({
					success: res =>{
						let senderMsg = {
							dataTime: new Date(),
							msgType: 'voice',
							vsrc: res.tempFilePath
						}
						this.chatMsgList.push(senderMsg)
						let resMsg = {
							sender: '前端课堂',
							face: '/static/faces/3-thump.jpg',
							msgType: 'text',
							msgInfo: '客户录制发布了一段讲话'
						}
						
						this.chatMsgList.push(resMsg)
						uni.setStorageSync('chatMsgList', JSON.stringify(this.chatMsgList))
						
						this.$nextTick(()=>{
							this.scrollToBottom()
						})
					}
				})
			},
			stopMic(){
				wx.stopRecord()
			},
			playVoice(vsrc){
				wx.playVoice({
					filePath:vsrc
				})
			}
		
		
		}
	}
</script>


<style lang="scss">
	.container{
		background-color: #f1f1f1;
		min-height: 100vh;
	}
	.chat-body {
	  padding-bottom: 178upx;
	  .chat-time {
	    text-align: center;
	    color: #888;
	    padding: 40upx 0 0;
	  }
	  .chat-one {
	    display: flex;
	    flex-direction: row;
	    flex-wrap: wrap;
	    justify-content: flex-start;
	    align-items: flex-start;
	    padding: 20upx 0;
	  }
	  .chat-one-begin {
	    padding: 40upx 0 0;
	  }
	  .chat-one-mine {
	    justify-content: flex-end;
	  }
	  .chat-face {
	    width: 84upx;
	    height: 84upx;
	    border-radius: 10upx;
	    margin-left: 40upx;
	  }
	  .chat-one-mine .chat-face {
	    margin-left: 0;
	    margin-right: 40upx;
	  }
	  .chat-box {
	    max-width: calc(100% - 290upx);
	    margin-left: 20upx;
	    font-size: 30upx;
	  }
	  .chat-one-mine .chat-box {
	    margin-right: 20upx;
	  }
	  .chat-sender {
	    color: #888;
	    font-size: 28upx;
	    margin-top: -8upx;
	    margin-bottom: 10upx;
	  }
	  .chat-content {
	    background-color: #fff;
	    border-radius: 5px;
	    padding: 10px;
		.micon{
			margin-right: 20upx;
			color: #666;
		}
	  }
	  .chat-img {
	    float: left;
	    max-width: 60%;
	    border-radius: 5px;
	  }
	  .chat-one-mine .chat-img {
	    float: right;
	  }
	}
	
	.chat-footer {
	  width: 100%;
	  padding: 0 40upx;
	  height: 120upx;
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  background-color: #f1f1f1;
	  display: flex;
	  flex-direction: row;
	  flex-wrap: wrap;
	  justify-content: space-between;
	  align-items: center;
	  align-content: center;
	  border-top: 1upx solid #ddd;
	  
	  .voice-input {
	    background-color: #fff;
	    height: 70upx;
	    line-height: 70upx;
	    width: calc(100% - 260upx);
	    text-align: center;
	    border-radius: 10upx;
	  }
	  
	  .msg-input {
	    background-color: #fff;
	    width: calc(100% - 300upx);
	    height: 70upx;
	    line-height: 70upx;
	    font-size: 30upx;
	    border-radius: 10upx;
		padding: 0 20upx;
	  }
	  .send-btn{
		  height: 52upx;
		  line-height: 52upx;
		  width: 80upx;
		  text-align: center;
		  background-color: green;
		  color: #FFFFFF;
		  border-radius: 12upx;
	  }
	  
	}
	

</style>

